<template>
	<view class="pageBox">
		<view class="topBG"></view>
		<view class="myBox-topBox">
			<uni-nav-bar height="88rpx" fixed title="商家版" color="#fff" :border="false" statusBar
				:backgroundColor="navBG">
			</uni-nav-bar>
			<view class="contentBox">
				<view class="userRow">
					<view class="userRow-left">
						<view class="userImg">
							<image :src="userInfo.avatar" class="imgSize" mode="aspectFit" v-if="userInfo.avatar">
							</image>
							<image src="@/static/home/useImg.png" class="imgSize" mode="aspectFit" v-else></image>
						</view>
						<view class="left-right">
							<view class="userNameBox">
								<view class="userName">{{businessInfo.integralBusiness.businessName}}</view>
							</view>
							<!-- <view class="userType">
								{{dicts.business_type[businessInfo.integralBusiness.businessType].label}}
							</view> -->
							<view class="userType">{{businessInfo.integralBusiness.address}}</view>
						</view>
					</view>
				</view>
				<view class="topMatterBox" @click="scanCode">
					<image class="scanBox" src="@/static/merchant/scan.png" mode="aspectFit"></image>
					<view class="scanText">核销扫一扫</view>
				</view>
				<!-- <view class="cardBox">
					<view class="title">我的核销</view>
					<view class="cardBox-row">
						<view class="item" v-for="(item,index) in myVerification" :key="index" @click="goto(item.url)">
							<view class="num">{{businessInfo.statistics[item.text]||0}}</view>
							<view class="text">{{item.text}}</view>
						</view>
					</view>
				</view> -->
				<!-- <view class="cardBox">
					<view class="title">我的商品</view>
					<view class="cardBox-row">
						<view class="item" v-for="(item,index) in myGoods" :key="index" @click="goto(item.url)">
							<view class="num">{{businessInfo.statistics[item.text]||0}}</view>
							<view class="text">{{item.text}}</view>
						</view>
					</view>
				</view> -->
				<view class="myOrderBox" style="margin-top: 20rpx;">
					<view class="title">操作</view>
					<view class="myOrderRow">
						<view class="item" @click="outLoginShow=true">
							<image class="img" src="@/static/my/WaitingForShipment.png"></image>
							<view class="text">退出登录</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-modal :show="outLoginShow" title="提示" content="确认退出登录吗？" confirmText="确认" showCancelButton cancelText="取消"
			@confirm="outLogin" @close="outLoginShow=false" @cancel="outLoginShow=false"></u-modal>
		<!-- <tabBar selectedIndex="4"></tabBar> -->
		<!-- <myTabBar nowIndex="my/my"></myTabBar> -->
	</view>
</template>

<script>
	// #ifdef H5
	var wx = require('jweixin-module')
	// #endif
	import {
		getWxSign
	} from "@/api/login.js"
	import * as merchantApi from "@/api/merchant.js"
	import {
		getInfo
	} from "@/api/user.js"
	import * as systemApi from "@/api/system.js"
	import * as volumeUserInfoApi from "@/api/volumeUserInfo.js"
	export default {
		data() {
			return {
				outLoginShow: false,
				navBG: 'transparent',
				myVerification: [{
					text: '核销列表',
					url: 'Merchant/writeOffList/writeOffList',
					num: '5'
				}],
				myGoods: [{
					text: '订单',
					url: 'Merchant/orderPage/orderPage',
					num: '5'
				}, {
					text: '商品',
					url: 'Merchant/management/management',
					num: '5'
				}, ],
				businessInfo: {
					integralBusiness: {
						businessName: ''
					}
				},
				eliteInfo: {
					count: {},
					activityCount: {}
				},
				userInfo: {
					userName: '',
					roles: [{
						roleName: '',
						roleId: '',
						roleKey: ''
					}],
					avatar: '',
					nickName: '',
					sex: 2
				},
				dicts: {
					business_type: {},
				},
				dictList: {
					business_type: [],
				},
			};
		},
		onLoad() {
			this.getDictDataList('business_type')
		},
		onShow() {
			//⭐隐藏pages.json里配置的导航栏，使用封装的tabbar组件
			// uni.hideTabBar({
			// 	animation: false
			// })
			this.$store.commit('clearStorage')
			this.getUserInfo()
		},
		methods: {
			outLogin() {
				uni.clearStorageSync()
				uni.reLaunch({
					url: "/pages/login/login"
				})
			},
			// indent_status
			getDictDataList(dictType) {
				return new Promise((resolve, reject) => {
					systemApi.dictDataList(dictType).then(({
						rows
					}) => {
						let objs = {}
						let keyValues = []
						rows.forEach((item) => {
							objs[item.dictValue] = item.dictLabel
							keyValues.push({
								label: item.dictLabel,
								text: item.dictLabel,
								value: item.dictValue
							})
						})
						this.dicts[dictType] = objs
						this.dictList[dictType] = keyValues
						resolve({
							objs,
							keyValues,
							rows
						})
					}).catch(reject)
				})
			},
			getUserInfo() {
				this.$store.dispatch('userBaseInfo').then(res => {
					this.businessInfo = res.businessInfo
					this.eliteInfo = res.eliteInfo
				})
			},
			// getVolumeInfo(){
			// 	volumeUserInfoApi.volumeUserInfoId()
			// },
			scanCode() {
				let that = this //如果要把扫码结果赋值给页面定义变量，要使用that.变量名
				// #ifdef H5
				const url = encodeURIComponent(window.location.href)
				getWxSign(url).then(({
					data
				}) => {
					wx.config({
						debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
						appId: 'wx9b3a37b82826ea43', // 必填，公众号的唯一标识
						timestamp: data.timestamp, // 必填，生成签名的时间戳
						nonceStr: data.nonceStr, // 必填，生成签名的随机串
						signature: data.signature, // 必填，签名
						jsApiList: ['checkJsApi', 'startRecord', 'stopRecord', 'translateVoice',
							'scanQRCode', 'openCard'
						] // 必填，需要使用的 JS 接口列表
					})
					console.log({
						...data
					})
					wx.ready(() => {
						wx.scanQRCode({
							needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果， 
							scanType: ['qrCode'], // 可以指定扫二维码还是一维码，默认二者都有
							success: function(res) {
								var result = res.resultStr // 当needResult 为 1 时，扫码返回的结果
								const dataObj = JSON.parse(result)
								if (Array.isArray(dataObj)) {
									uni.showModal({
										title: '提示',
										content: '请扫描正确二维码'
									})
								} else {
									//二维码时
									// alert(res.resultStr);
									// uni.navigateTo({
									// 	url: `/pages/Merchant/writeOff/writeOff?vid=${dataObj.vid}&uid=${ dataObj.uid}`
									// })
									// that.$navTo('pages/Merchant/writeOff/writeOff', {
									// 	vid: dataObj.vid,
									// 	uid: dataObj.uid
									// })
									//location.href='接收结果页面='+res.resultStr;//扫描结果传递到的处理页面
								}
							}
						})
					})
				})
				// #endif
			},

			goto(url, data) {
				this.$navTo(`pages/${url}`, data)
			}
		},
		onPageScroll({
			scrollTop
		}) {
			if (scrollTop > 10) {
				this.navBG = "#1F4FD7"
			} else {
				this.navBG = "transparent"
			}
			console.log(e);
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		background-color: #F4F7FF;
	}

	.pageBox {
		position: relative;

		.myOrderBox {
			height: 252rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-bottom: 30rpx;

			.title {
				padding-left: 30rpx;
				padding-top: 40rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #000000;
				margin-bottom: 20rpx;
			}

			.myOrderRow {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				.item {
					width: 25%;
					box-sizing: border-box;
					text-align: center;

					.img {
						width: 64rpx;
						height: 64rpx;
						object-fit: cover;
					}

					.text {
						margin-top: 24rpx;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #000000;
					}
				}
			}
		}

		.topBG {
			flex-shrink: 0;
			top: 0;
			left: 0;
			position: absolute;
			width: 100%;
			height: 646rpx;
			background: linear-gradient(180deg, #043AD3 0%, rgba(4, 58, 211, 0) 100%);
			object-fit: cover;
		}

		.myBox-topBox {
			width: 100%;
			position: relative;
			z-index: 1;

			.contentBox {
				padding: 0 30rpx;
				padding-top: 20rpx;
			}
		}

		.userRow {
			position: relative;
			z-index: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.userRow-left {
				display: flex;
				align-items: center;
				width: 100%;

				.userImg {
					width: 108rpx;
					height: 108rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 20rpx;
					flex-shrink: 0;
				}

				.left-right {
					width: 100%;

					.userNameBox {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.userName {
							font-size: 32rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 600;
							color: #FFFFFF;
						}

						.userInfoStatus {
							width: 128rpx;
							height: 48rpx;
							background: rgba(255, 255, 255, 0.3);
							border-radius: 16rpx 16rpx 16rpx 16rpx;
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-left: 20rpx;
						}
					}

					.userType {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						margin-top: 10rpx;
					}
				}
			}

			.userRow-right {
				display: flex;
				align-items: center;
				flex-shrink: 0;

				.img {
					width: 44rpx;
					height: 44rpx;
					object-fit: cover;
				}
			}
		}

		.topMatterBox {
			position: relative;
			padding: 40rpx 0;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 30rpx 0;

			.scanBox {
				border-radius: 20rpx;
				width: 104rpx;
				height: 104rpx;
				object-fit: cover;
				margin-right: 36rpx;
				background-color: #4D80EC;
			}

			.scanText {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}
		}

		.cardBox {
			height: 258rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-bottom: 30rpx;

			.title {
				padding-left: 30rpx;
				padding-top: 40rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #000000;
				margin-bottom: 20rpx;
			}

			.cardBox-row {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				.item {
					width: 50%;
					box-sizing: border-box;
					text-align: center;

					.num {
						font-size: 48rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						color: #000000;
					}

					.text {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #7B7B7B;
					}
				}
			}
		}

	}
</style>